<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心 - 电信套餐订购系统</title>
    <!-- 引入项目现有的CSS -->
    <link rel="stylesheet" href="./css/github-markdown-light.css">
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            min-height: 100vh;
        }
        
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 60px;
        }
        
        .modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 0;
            border: 1px solid #888;
            width: 90%;
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }
        
        .modal-header {
            padding: 20px 30px;
            background-color: #2196F3;
            color: white;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-header h2 {
            margin: 0;
            font-size: 22px;
        }
        
        .close-btn {
            color: #fff;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
        }
        
        .close-btn:hover,
        .close-btn:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
        
        .modal-body {
            padding: 30px;
        }
        
        .modal-footer {
            padding: 20px 30px;
            background-color: #f5f5f5;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            text-align: right;
        }
        
        /* 标签页样式 */
        .tab-container {
            display: flex;
            border-bottom: 2px solid #e0e0e0;
            margin-bottom: 20px;
        }
        
        .tab-btn {
            background: none;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            color: #666;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
        }
        
        .tab-btn:hover {
            color: #2196F3;
        }
        
        .tab-btn.active {
            color: #2196F3;
            border-bottom: 3px solid #2196F3;
            font-weight: bold;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #333;
        }
        
        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #2196F3;
        }
        
        .form-input[readonly] {
            background-color: #f5f5f5;
            cursor: not-allowed;
        }
        
        .form-group small {
            display: block;
            margin-top: 5px;
            color: #999;
            font-size: 12px;
        }
        
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .checkbox-group label {
            display: flex;
            align-items: center;
            font-weight: normal;
            margin-bottom: 0;
            cursor: pointer;
        }
        
        .checkbox-group input[type="checkbox"] {
            margin-right: 6px;
        }
        
        /* 按钮样式 */
        .btn-primary,
        .btn-secondary {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 10px;
        }
        
        .btn-primary {
            background-color: #2196F3;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #1976D2;
        }
        
        .btn-secondary {
            background-color: #f5f5f5;
            color: #666;
            border: 1px solid #ddd;
        }
        
        .btn-secondary:hover {
            background-color: #e0e0e0;
        }
        
        /* 状态标签样式 */
        .status-active {
            color: #4CAF50;
            font-weight: bold;
        }
        
        .status-expired {
            color: #F44336;
        }
        
        /* 页面容器 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 页面标题 */
        .page-title {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 30px;
            color: #333;
            text-align: center;
        }
        
        /* 欢迎信息 */
        .welcome-message {
            text-align: center;
            font-size: 18px;
            color: #666;
            margin-bottom: 40px;
        }
        
        /* 功能模块区域 */
        .modules-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        /* 功能模块卡片 */
        .module-card {
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border: 2px solid #e0e0e0;
        }
        
        .module-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            border-color: #2196F3;
        }
        
        .module-icon {
            font-size: 48px;
            margin-bottom: 20px;
            color: #2196F3;
        }
        
        .module-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        
        .module-description {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }
        
        .module-btn {
            padding: 10px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .module-btn:hover {
            background-color: #1976D2;
        }
        
        /* 已订购套餐区域 */
        .ordered-packages-section {
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
            padding-bottom: 10px;
            border-bottom: 2px solid #2196F3;
        }
        
        /* 套餐列表 */
        .package-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        /* 套餐卡片 */
        .package-card {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            border: 1px solid #e9ecef;
            transition: transform 0.2s ease;
        }
        
        .package-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        
        .package-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        
        .package-info {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        
        .package-info-item {
            margin-bottom: 5px;
        }
        
        .package-info-label {
            font-weight: bold;
            margin-right: 5px;
        }
        
        .package-date {
            font-size: 12px;
            color: #999;
            text-align: right;
        }
        
        /* 无套餐提示 */
        .no-packages {
            text-align: center;
            padding: 40px;
            color: #999;
            font-size: 16px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            .modules-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .module-card {
                padding: 20px;
            }
            
            .package-list {
                grid-template-columns: 1fr;
            }
            
            .page-title {
                font-size: 24px;
            }
            
            .section-title {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title">电信套餐订购系统 - 用户中心</h1>
        
        <div class="welcome-message">
            <p>欢迎使用电信套餐订购系统，请选择下方功能模块进行操作</p>
        </div>
        
        <!-- 功能模块区域 -->
        <div class="modules-container">
            <!-- 智能推荐模块 -->
            <div class="module-card" id="recommendationModule">
                <div class="module-icon">💡</div>
                <h2 class="module-title">智能套餐推荐</h2>
                <p class="module-description">获取基于您使用习惯的个性化套餐推荐，AI智能分析，为您省钱省心</p>
                <button class="module-btn">前往推荐</button>
            </div>
            
            <!-- 套餐订购模块 -->
            <div class="module-card" id="orderModule">
                <div class="module-icon">📱</div>
                <h2 class="module-title">套餐订购</h2>
                <p class="module-description">浏览并订购各类电信套餐，享受更多优惠和便捷服务</p>
                <button class="module-btn">前往订购</button>
            </div>
            
            <!-- 个人信息模块 -->
            <div class="module-card" id="profileModule">
                <div class="module-icon">👤</div>
                <h2 class="module-title">个人信息</h2>
                <p class="module-description">查看和修改您的个人基本信息、联系方式和偏好设置</p>
                <button class="module-btn">管理信息</button>
            </div>
        </div>
        
        <!-- 已订购套餐区域 -->
        <div class="ordered-packages-section">
            <h2 class="section-title">已订购套餐</h2>
            
            <div id="packageList" class="package-list">
                <!-- 动态加载已订购套餐 -->
                <div class="no-packages">
                    正在加载已订购套餐...
                </div>
            </div>
        </div>
    </div>
    
    <!-- 个人信息模态框 -->
    <div id="profileModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>个人信息管理</h2>
                <span class="close-btn">&times;</span>
            </div>
            <div class="modal-body">
                <!-- 标签页导航 -->
                <div class="tab-container">
                    <button class="tab-btn active" data-tab="basic">基本信息</button>
                    <button class="tab-btn" data-tab="contact">联系方式</button>
                    <button class="tab-btn" data-tab="preferences">偏好设置</button>
                </div>
                
                <!-- 基本信息标签页 -->
                <div class="tab-content active" id="basic-tab">
                    <div class="form-group">
                        <label for="fullName">姓名</label>
                        <input type="text" id="fullName" class="form-input">
                    </div>
                    <div class="form-group">
                        <label for="gender">性别</label>
                        <select id="gender" class="form-input">
                            <option value="male">男</option>
                            <option value="female">女</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="birthday">出生日期</label>
                        <input type="date" id="birthday" class="form-input">
                    </div>
                    <div class="form-group">
                        <label for="idCard">身份证号</label>
                        <input type="text" id="idCard" class="form-input" readonly>
                        <small>身份证号不可修改，请联系客服</small>
                    </div>
                </div>
                
                <!-- 联系方式标签页 -->
                <div class="tab-content" id="contact-tab">
                    <div class="form-group">
                        <label for="phone">手机号码</label>
                        <input type="tel" id="phone" class="form-input">
                    </div>
                    <div class="form-group">
                        <label for="email">电子邮箱</label>
                        <input type="email" id="email" class="form-input">
                    </div>
                    <div class="form-group">
                        <label for="address">联系地址</label>
                        <textarea id="address" class="form-input" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="emergencyContact">紧急联系人</label>
                        <input type="text" id="emergencyContact" class="form-input">
                    </div>
                    <div class="form-group">
                        <label for="emergencyPhone">紧急联系人电话</label>
                        <input type="tel" id="emergencyPhone" class="form-input">
                    </div>
                </div>
                
                <!-- 偏好设置标签页 -->
                <div class="tab-content" id="preferences-tab">
                    <div class="form-group">
                        <label for="notification">通知偏好</label>
                        <div class="checkbox-group">
                            <label><input type="checkbox" id="smsNotif"> 短信通知</label>
                            <label><input type="checkbox" id="emailNotif"> 邮件通知</label>
                            <label><input type="checkbox" id="appNotif"> App推送</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="language">语言偏好</label>
                        <select id="language" class="form-input">
                            <option value="zh-CN">简体中文</option>
                            <option value="en-US">English</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="dataUsageAlert">流量使用提醒</label>
                        <select id="dataUsageAlert" class="form-input">
                            <option value="none">不提醒</option>
                            <option value="50">使用50%时提醒</option>
                            <option value="80">使用80%时提醒</option>
                            <option value="50_80">使用50%和80%时提醒</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="planRecommendations">套餐推荐偏好</label>
                        <div class="checkbox-group">
                            <label><input type="checkbox" id="dataFocus"> 流量优先</label>
                            <label><input type="checkbox" id="callFocus"> 通话优先</label>
                            <label><input type="checkbox" id="priceFocus"> 价格优先</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="cancelBtn" class="btn-secondary">取消</button>
                <button id="saveBtn" class="btn-primary">保存更改</button>
            </div>
        </div>
    </div>
    
    <script>
        // 获取当前登录用户信息
        // 在实际应用中，这里应该从后端获取用户信息
        const currentUser = {
            id: 1, // 模拟用户ID
            username: '普通用户',
            email: 'user@example.com'
        };
        
        // 更新欢迎信息
        document.querySelector('.welcome-message').innerHTML = 
            `<p>欢迎回来，${currentUser.username}！请选择下方功能模块进行操作</p>`;
        
        // 模块点击事件
        document.getElementById('recommendationModule').addEventListener('click', function() {
            window.location.href = 'sse_user.html';
        });
        
        document.getElementById('orderModule').addEventListener('click', function() {
            window.location.href = 'package_order.html?type=user';
        });
        
        // 个人信息模块点击事件
        document.getElementById('profileModule').addEventListener('click', function() {
            openProfileModal();
        });
        
        // 模拟用户完整信息
        const userProfile = {
            basic: {
                fullName: '张三',
                gender: 'male',
                birthday: '1990-01-15',
                idCard: '110101199001151234'
            },
            contact: {
                phone: '13800138000',
                email: 'user@example.com',
                address: '北京市朝阳区某某街道100号',
                emergencyContact: '李四',
                emergencyPhone: '13900139000'
            },
            preferences: {
                notifications: {
                    smsNotif: true,
                    emailNotif: true,
                    appNotif: false
                },
                language: 'zh-CN',
                dataUsageAlert: '80',
                planRecommendations: {
                    dataFocus: true,
                    callFocus: false,
                    priceFocus: true
                }
            }
        };
        
        // 获取模态框元素
        const modal = document.getElementById('profileModal');
        const closeBtn = document.getElementsByClassName('close-btn')[0];
        const cancelBtn = document.getElementById('cancelBtn');
        const saveBtn = document.getElementById('saveBtn');
        const tabBtns = document.getElementsByClassName('tab-btn');
        const tabContents = document.getElementsByClassName('tab-content');
        
        // 打开个人信息模态框
        function openProfileModal() {
            // 加载用户信息到表单
            loadUserProfile();
            
            // 显示模态框
            modal.style.display = 'block';
        }
        
        // 关闭模态框
        function closeProfileModal() {
            modal.style.display = 'none';
        }
        
        // 加载用户信息到表单
        function loadUserProfile() {
            // 加载基本信息
            document.getElementById('fullName').value = userProfile.basic.fullName;
            document.getElementById('gender').value = userProfile.basic.gender;
            document.getElementById('birthday').value = userProfile.basic.birthday;
            document.getElementById('idCard').value = userProfile.basic.idCard;
            
            // 加载联系方式
            document.getElementById('phone').value = userProfile.contact.phone;
            document.getElementById('email').value = userProfile.contact.email;
            document.getElementById('address').value = userProfile.contact.address;
            document.getElementById('emergencyContact').value = userProfile.contact.emergencyContact;
            document.getElementById('emergencyPhone').value = userProfile.contact.emergencyPhone;
            
            // 加载偏好设置
            document.getElementById('smsNotif').checked = userProfile.preferences.notifications.smsNotif;
            document.getElementById('emailNotif').checked = userProfile.preferences.notifications.emailNotif;
            document.getElementById('appNotif').checked = userProfile.preferences.notifications.appNotif;
            document.getElementById('language').value = userProfile.preferences.language;
            document.getElementById('dataUsageAlert').value = userProfile.preferences.dataUsageAlert;
            document.getElementById('dataFocus').checked = userProfile.preferences.planRecommendations.dataFocus;
            document.getElementById('callFocus').checked = userProfile.preferences.planRecommendations.callFocus;
            document.getElementById('priceFocus').checked = userProfile.preferences.planRecommendations.priceFocus;
        }
        
        // 保存用户信息
        function saveUserProfile() {
            // 保存基本信息
            userProfile.basic.fullName = document.getElementById('fullName').value;
            userProfile.basic.gender = document.getElementById('gender').value;
            userProfile.basic.birthday = document.getElementById('birthday').value;
            
            // 保存联系方式
            userProfile.contact.phone = document.getElementById('phone').value;
            userProfile.contact.email = document.getElementById('email').value;
            userProfile.contact.address = document.getElementById('address').value;
            userProfile.contact.emergencyContact = document.getElementById('emergencyContact').value;
            userProfile.contact.emergencyPhone = document.getElementById('emergencyPhone').value;
            
            // 保存偏好设置
            userProfile.preferences.notifications.smsNotif = document.getElementById('smsNotif').checked;
            userProfile.preferences.notifications.emailNotif = document.getElementById('emailNotif').checked;
            userProfile.preferences.notifications.appNotif = document.getElementById('appNotif').checked;
            userProfile.preferences.language = document.getElementById('language').value;
            userProfile.preferences.dataUsageAlert = document.getElementById('dataUsageAlert').value;
            userProfile.preferences.planRecommendations.dataFocus = document.getElementById('dataFocus').checked;
            userProfile.preferences.planRecommendations.callFocus = document.getElementById('callFocus').checked;
            userProfile.preferences.planRecommendations.priceFocus = document.getElementById('priceFocus').checked;
            
            // 在实际应用中，这里应该发送API请求保存到后端
            // 模拟保存成功提示
            alert('个人信息已成功保存！');
            closeProfileModal();
        }
        
        // 切换标签页
        function switchTab(tabName) {
            // 隐藏所有标签内容
            for (let i = 0; i < tabContents.length; i++) {
                tabContents[i].classList.remove('active');
            }
            
            // 移除所有标签按钮的活跃状态
            for (let i = 0; i < tabBtns.length; i++) {
                tabBtns[i].classList.remove('active');
            }
            
            // 显示选中的标签内容和激活对应的按钮
            document.getElementById(tabName + '-tab').classList.add('active');
            
            // 找到对应标签按钮并激活
            for (let i = 0; i < tabBtns.length; i++) {
                if (tabBtns[i].getAttribute('data-tab') === tabName) {
                    tabBtns[i].classList.add('active');
                    break;
                }
            }
        }
        
        // 添加事件监听器
        closeBtn.addEventListener('click', closeProfileModal);
        cancelBtn.addEventListener('click', closeProfileModal);
        saveBtn.addEventListener('click', saveUserProfile);
        
        // 点击模态框外部关闭模态框
        window.addEventListener('click', function(event) {
            if (event.target === modal) {
                closeProfileModal();
            }
        });
        
        // 为标签按钮添加点击事件
        for (let i = 0; i < tabBtns.length; i++) {
            tabBtns[i].addEventListener('click', function() {
                const tabName = this.getAttribute('data-tab');
                switchTab(tabName);
            });
        }
        
        // 模拟获取已订购套餐数据
        function fetchOrderedPackages() {
            // 在实际应用中，这里应该从后端API获取数据
            // 模拟API请求延迟
            setTimeout(() => {
                // 模拟已订购套餐数据
                const orderedPackages = [
                    {
                        id: 1,
                        name: '畅享流量套餐',
                        price: 198.00,
                        dataLimit: 100,
                        dataUnit: 'GB',
                        callMinutes: 300,
                        smsCount: 100,
                        orderDate: '2025-10-01',
                        expireDate: '2025-10-31',
                        status: 'active'
                    },
                    {
                        id: 2,
                        name: '商务精英套餐',
                        price: 298.00,
                        dataLimit: 200,
                        dataUnit: 'GB',
                        callMinutes: 1000,
                        smsCount: 500,
                        orderDate: '2023-09-15',
                        expireDate: '2023-10-15',
                        status: 'expired'
                    }
                ];
                
                renderOrderedPackages(orderedPackages);
            }, 1000);
        }
        
        // 渲染已订购套餐
        function renderOrderedPackages(packages) {
            const packageListElement = document.getElementById('packageList');
            
            if (packages.length === 0) {
                packageListElement.innerHTML = `
                    <div class="no-packages">
                        您还没有订购任何套餐，快去选购吧！
                    </div>
                `;
                return;
            }
            
            let html = '';
            
            packages.forEach(pkg => {
                const statusClass = pkg.status === 'active' ? 'status-active' : 'status-expired';
                const statusText = pkg.status === 'active' ? '使用中' : '已过期';
                
                html += `
                    <div class="package-card">
                        <h3 class="package-name">${pkg.name}</h3>
                        <div class="package-info">
                            <div class="package-info-item">
                                <span class="package-info-label">价格:</span>
                                <span>¥${pkg.price.toFixed(2)}</span>
                            </div>
                            <div class="package-info-item">
                                <span class="package-info-label">流量:</span>
                                <span>${pkg.dataLimit} ${pkg.dataUnit}</span>
                            </div>
                            <div class="package-info-item">
                                <span class="package-info-label">通话:</span>
                                <span>${pkg.callMinutes}分钟</span>
                            </div>
                            <div class="package-info-item">
                                <span class="package-info-label">短信:</span>
                                <span>${pkg.smsCount}条</span>
                            </div>
                            <div class="package-info-item">
                                <span class="package-info-label">状态:</span>
                                <span class="${statusClass}">${statusText}</span>
                            </div>
                        </div>
                        <div class="package-date">
                            订购日期: ${pkg.orderDate} - ${pkg.expireDate}
                        </div>
                    </div>
                `;
            });
            
            packageListElement.innerHTML = html;
        }
        
        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            fetchOrderedPackages();
        });
    </script>
</body>
</html>